<template>
  <div class="app-container queryView">
    <div class="query-title">查询</div>
    <div class="divflex">
      <div>请选择地址:</div>
      <area-cascader v-model="area" style="width: 300px; margin-left: 20px" />
    </div>
    <div class="divflex" style="justify-content: space-between">
      <div>请选择查询条件:</div>
      <el-button type="primary" @click="addQuery">新增</el-button>
    </div>
    <div />
    <el-form
      v-for="(query, queryIndex) in queryList"
      ref="queryFormRef"
      :key="queryIndex"
      :model="query"
      :inline="true"
    >
      <el-form-item
        label="请选择条件关系"
        :rules="[{ required: true, message: '条件关系不能为空' }]"
        prop="relation"
      >
        <el-select v-model="query.relation" placeholder="请选择" clearable>
          <el-option
            v-for="(item, index) in dict.type.jdrycx_tjgx"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="请选择名称"
        :rules="[{ required: true, message: '名称不能为空' }]"
        prop="field"
      >
        <el-select
          v-model="query.field"
          placeholder="请选择"
          clearable
          @change="query.content = ''"
        >
          <el-option
            v-for="(item, index) in dict.type.jdrycx_mc"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="请选择查询条件"
        :rules="[{ required: true, message: '查询条件不能为空' }]"
        prop="condition"
      >
        <el-select v-model="query.condition" placeholder="请选择" clearable>
          <el-option
            v-for="(item, index) in dict.type.jdrycx_cxtj"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="getShowItem(query.field)"
        :label="getShowItem(query.field).dictLabel"
        :rules="[{ required: true, message: '不能为空' }]"
        prop="content"
      >
        <el-select
          v-if="getShowItem(query.field).dictType == 'select'"
          v-model="query.content"
          style="width: 200px"
          :placeholder="getShowItem(query.field).dictLabel"
        >
          <el-option
            v-for="(item, index) in dict.type[
              getShowItem(query.field).dictTypeValue
            ]"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input
          v-if="getShowItem(query.field).dictType == 'text'"
          v-model="query.content"
          style="width: 200px"
          :placeholder="getShowItem(query.field).dictLabel"
        />
        <el-date-picker
          v-if="getShowItem(query.field).dictType == 'time'"
          v-model="query.content"
          style="width: 200px"
          type="date"
          :placeholder="getShowItem(query.field).dictLabel"
        />
      </el-form-item>
      <el-form-item
        v-else
        label="请选择内容"
        :rules="[{ required: true, message: '不能为空' }]"
        prop="content"
      >
        <el-input v-model="query.content" placeholder="请输入" />
      </el-form-item>
      <el-form-item v-if="queryIndex > 0">
        <i
          class="el-icon-delete"
          style="cursor: pointer; color: red"
          @click="delItem(queryIndex)"
        />
      </el-form-item>
    </el-form>
    <el-button type="primary" style="margin-top: 10px" @click="customQuery"
      >查询</el-button
    >
    <ModalView ref="modalRef" />
  </div>
</template>
<script>
import ModalView from "./modal.vue";
export default {
  components: {
    ModalView,
  },
  dicts: [
    "jdrycx_tjgx",
    "jdrycx_mc",
    "jdrycx_cxtj",
    "gender",
    "whcd",
    "jyqk",
    "lydplx",
    "sys_yes_no",
    "jntc",
    "zzmm",
    "user_type",
    "hyzk",
  ],

  data() {
    return {
      area: "",
      queryList: [{ relation: "", field: "", condition: "", content: "" }],
    };
  },
  computed: {
    newDict() {
      const newArray = [];
      for (let i = 0; i < this.dict.type.jdrycx_mc.length; i++) {
        const item = this.dict.type.jdrycx_mc[i];
        if (
          [
            "姓名",
            "民族",
            "身份证",
            "电话",
            "执行单位详称",
            "责令单位详称",
          ].some((v) => v == item.label)
        ) {
          item.dictType = "text";
          item.dictLabel = "请输入内容";
        }
        if (["性别"].some((v) => v == item.label)) {
          item.dictType = "select";
          item.dictTypeValue = "gender";
          item.dictLabel = "请选择值";
        }
        if (["文化程度"].some((v) => v == item.label)) {
          item.dictType = "select";
          item.dictTypeValue = "whcd";
          item.dictLabel = "请选择值";
        }
        if (["就业情况"].some((v) => v == item.label)) {
          item.dictType = "select";
          item.dictTypeValue = "jyqk";
          item.dictLabel = "请选择值";
        }
        if (["滥用毒品种类"].some((v) => v == item.label)) {
          item.dictType = "select";
          item.dictTypeValue = "lydplx";
          item.dictLabel = "请选择值";
        }
        if (["是否与父母居住", "驾驶证是否吊销"].some((v) => v == item.label)) {
          item.dictType = "select";
          item.dictTypeValue = "sys_yes_no";
          item.dictLabel = "请选择值";
        }
        if (["技能"].some((v) => v == item.label)) {
          item.dictType = "select";
          item.dictTypeValue = "jntc";
          item.dictLabel = "请选择值";
        }
        if (["报到时间", "出生日期"].some((v) => v == item.label)) {
          item.dictType = "time";
          item.dictLabel = "请选择时间";
        }
        if (["政治面貌"].some((v) => v == item.label)) {
          item.dictType = "select";
          item.dictTypeValue = "zzmm";
          item.dictLabel = "请选择值";
        }
        if (["人员类型"].some((v) => v == item.label)) {
          item.dictType = "select";
          item.dictTypeValue = "user_type";
          item.dictLabel = "请选择值";
        }
        if (["婚姻状况"].some((v) => v == item.label)) {
          item.dictType = "select";
          item.dictTypeValue = "hyzk";
          item.dictLabel = "请选择值";
        }
        newArray.push(item);
      }
      return newArray;
    },
  },

  methods: {
    getShowItem(value) {
      const item = this.newDict.find((v) => v.value == value);
      if (item) {
        return item;
      }
      return null;
    },
    addQuery() {
      this.queryList.push({
        relation: "",
        field: "",
        condition: "",
        content: "",
      });
    },
    delItem(index) {
      this.queryList.splice(index, 1);
    },
    customQuery() {
      let isValid = false;
      for (let i = 0; i < this.queryList.length; i++) {
        this.$refs["queryFormRef"][i].validate((valid) => {
          if (valid) {
            isValid = true;
          } else {
            return false;
          }
        });
      }

      if (isValid) {
        this.$refs["modalRef"].openModal({
          area: this.area,
          querys: this.queryList,
        });
      }
    },
  },
};
</script>

<style scoped>
.query-title {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 10px;
}
.divflex {
  display: flex;
  align-items: center;
}
</style>
